<template>
  <div class="app-container">
    <common-table
      :has-new="false"
      :has-modify="false"
      :has-delete="true"
      :colnames="colnames"
      :list-data="listData"
      :list-loading="listLoading"
      :is-multiple="isMultiSelect"
      :custom-buttons="customButtons"
      :custom-selectors="customSelectors"
      :query="routeQuery"
      @fetchData="fetchData"
      @itemNew="itemNew"
      @itemEdit="itemEdit"
      @itemDelete="itemDelete"
      @onItemClick="onItemClick"
      @selectChange="selectChange"
    >
      <template v-slot:leftPannel>
        <el-button
          type="primary"
          size="mini"
          class="ml5"
          :disabled="multipleSelection.length === 0"
          @click="setPrice()"
          >编辑价格</el-button
        >
        <el-button
          type="primary"
          size="mini"
          class="ml5"
          :disabled="multipleSelection.length === 0"
          @click="setStation()"
          >分配场站</el-button
        >
      </template>
      <template v-slot:filter>
        <el-input
          v-model="listQuery.devIMEI"
          placeholder="请输入IMEI编号"
          clearable
          class="etag"
          size="mini"
        />
        <el-input
          v-model="listQuery.stationName"
          placeholder="请输入场站名称"
          clearable
          class="etag"
          size="mini"
        />
        <el-select
          v-model="listQuery.tag"
          clearable
          placeholder="请选择在线状态"
          size="mini"
        >
          <el-option label="离线" :value="0" />
          <el-option label="电量低" :value="1" />
          <el-option label="信号低" :value="2" />
        </el-select>

        <el-select
          v-model="listQuery.assign"
          clearable
          placeholder="是否分配"
          size="mini"
        >
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
        <el-button
          type="primary"
          size="mini"
          class="ml5"
          @click="fetchData(listQuery)"
          >筛选</el-button
        >
        <el-button
          type="default"
          size="mini"
          class="ml5"
          @click="exportData(listQuery)"
          >导出</el-button
        >
      </template>
    </common-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      destroy-on-close
    >
      <common-edit
        :fields="editCols"
        :edit-type="editType"
        :values="editValues"
        :rules="editRules"
        @onCancel="dialogVisible = false"
        @onSubmit="onSubmit"
      />
    </el-dialog>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="priceDialogVisible"
      width="40%"
      destroy-on-close
    >
      <price-edit
        :values="editValues"
        @onCancel="priceDialogVisible = false"
        @onSubmit="onSubmit"
      />
    </el-dialog>
  </div>
</template>

<style scoped>
.ebtn {
  margin-right: 5px;
}
.etag {
  width: 140px;
  margin-right: 5px;
}
</style>

<script>
import { mapGetters } from "vuex";
import CommonTable from "../commontable";
import CommonEdit from "../commontable/edit";
import PriceEdit from "../priceedit/edit";
import {
  delEtag,
  delEtagBatch,
  addEtag,
  putEtag,
  exportEtag,
} from "@/api/etag";
import { getAssetList, assignStation, setPrice } from "@/api/asset";
import { addPrice } from "@/api/price";
import { mergeQuerrys } from "@/utils";
export default {
  name: "Etag",
  components: { CommonTable, CommonEdit, PriceEdit },
  data() {
    return {
      customSelectors: [],
      customButtons: [
        // { name: '全部显示', type: 'primary', data: {}}
        // { name: '合并显示', type: 'primary', data: {}}
      ],
      colnames: [
        {
          displayName: "序号",
          colName: "id",
          dataType: "indexNo",
          colWidth: "64px",
        },
        { displayName: "IMEI编号", colName: "devIMEI" },
        { displayName: "devCCID", colName: "devCCID" },
        { displayName: "信号值", colName: "devRSSI" },
        { displayName: "温度", colName: "devTemp" },
        { displayName: "电量", colName: "devBat" },
        { displayName: "价格更新时间", colName: "devTemplateUpdateTime" },
        { displayName: "上次心跳时间", colName: "devUpdateTime" },
        {
          displayName: "设备创建时间",
          colName: "devCreateTime",
          dataType: "date",
          sortable: "costom",
        },
        { displayName: "设备名称", colName: "devName" },
        {
          displayName: "设定内容",
          colName: "settingPrice",
          dataType: "image",
          colWidth: "120px",
        },
        {
          displayName: "当前显示内容",
          colName: "curPrice",
          dataType: "image",
          colWidth: "120px",
        },
        {
          displayName: "同步状态",
          colName: "isSynchronized",
          sortable: false,
          formater: (val, row) => {
            return row.isSynchronized === 0 ? "是" : "否";
          },
        },

        {
          displayName: "是否分配",
          colName: "assign",
          sortable: false,
          formater: (val, row) => {
            return row.assign === 1 ? "是" : row.assign == 0 ? "否" : " ";
          },
        },
        { displayName: "场站名称", colName: "stationName" },
        { displayName: "区域名称", colName: "sectionName" },
      ],
      editCols_SetStation: [
        {
          displayName: "所属场站",
          colName: "stationId",
          dataType: "fromapipage",
          data: { name: "station" },
        },
        {
          displayName: "所属区域",
          colName: "sectionId",
          dataType: "fromapipage",
          data: { name: "section", queryWith: ["stationId"] },
        },
        {
          displayName: "车位信息",
          colName: "devName",
          dataType: "input",
          data: { name: "devName" },
        },
      ],
      editCols: [],
      editType: "edit",
      editValues: {},
      listData: {},
      editRules: {
        devId: [{ required: true, trigger: "blur", message: "不能为空" }],
        devIMEI: [{ required: true, trigger: "blur", message: "不能为空" }],
        devName: [{ required: true, trigger: "blur", message: "不能为空" }],
        priceType: [{ required: true, trigger: "blur", message: "不能为空" }],
        templateId: [{ required: true, trigger: "blur", message: "不能为空" }],
        stationId: [{ required: true, trigger: "blur", message: "不能为空" }],
        sectionId: [{ required: true, trigger: "blur", message: "不能为空" }],
      },
      listLoading: false,
      isMultiSelect: true,
      dialogVisible: false,
      priceDialogVisible: false,
      dialogTitle: "新建",
      stationName: "全部设备",
      listQuery: {
        assign: 0,
      },
      multipleSelection: [],
    };
  },
  computed: {
    ...mapGetters(["user", "name", "avatar", "roles"]),
    routeQuery() {
      return this.$route.params.query;
    },
  },
  created() {
    console.log(this.listQuery);
  },
  mounted() {
    this.$nextTick(() => {
      // this.listQuery.assign = 0
      if (this.$route.params.stationName) {
        this.stationName = this.$route.params.stationName + " 设备";
      }
    });
  },
  methods: {
    fetchData(listQuery) {
      this.listQuery = listQuery;
      console.log("fetchData", listQuery);
      this.listLoading = true;
      const keyDefs = [
        { key: "devIMEI", matchType: "like" },
        { key: "stationName", matchType: "like" },
        { key: "tag", matchType: "exact" },
        { key: "assign", matchType: "exact" },
      ];
      getAssetList(mergeQuerrys(keyDefs, listQuery))
        .then((ret) => {
          console.log("ret", ret);
          this.listData = ret.data;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    itemNew() {
      console.log("etag New", this.$route.params.stationId);
      this.editType = "add";
      this.dialogTitle = "新建";
      this.editValues = {
        stationId: this.$route.params.stationId,
      };
      this.dialogVisible = true;
    },
    itemEdit({ type, item, items }) {
      console.log("itemEdit");
      this.editType = "edit";
      this.editValues = item;
      this.dialogTitle = "修改";
      this.dialogVisible = true;
    },
    itemDelete({ type, item, items }) {
      console.log("itemDelete");
      if (type === "one") {
        delEtag({ etagId: item.id }).then((ret) => {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.fetchData(this.listQuery);
        });
      } else if (type === "multi") {
        delEtagBatch(items.map((v) => v.id).join(",")).then((ret) => {
          this.$message({
            type: "success",
            message: "多条记录删除成功！",
          });
          this.fetchData(this.listQuery);
        });
      }
    },
    onSubmit(formData) {
      console.log("onSubmitsssssssssss", this.editType);
      if (this.editType === "add") {
        // 新建
        // if (formData.priceType == 10) {
          formData.price1 = formData.unit1
            ? parseFloat(
                (
                  parseFloat(formData.unit1) + parseFloat(formData.service1)
                ).toFixed(2)
              )
            : null;
          formData.price2 = formData.unit2
            ? parseFloat(
                (
                  parseFloat(formData.unit2) + parseFloat(formData.service2)
                ).toFixed(2)
              )
            : null;
          formData.price3 = formData.unit3
            ? parseFloat(
                (
                  parseFloat(formData.unit3) + parseFloat(formData.service3)
                ).toFixed(2)
              )
            : null;
          formData.price4 = formData.unit4
            ? parseFloat(
                (
                  parseFloat(formData.unit4) + parseFloat(formData.service4)
                ).toFixed(2)
              )
            : null;
          formData.price5 = formData.unit5
            ? parseFloat(
                (
                  parseFloat(formData.unit5) + parseFloat(formData.service5)
                ).toFixed(2)
              )
            : null;
          formData.price6 = formData.unit6
            ? parseFloat(
                (
                  parseFloat(formData.unit6) + parseFloat(formData.service6)
                ).toFixed(2)
              )
            : null;
          formData.price7 = formData.unit7
            ? parseFloat(
                (
                  parseFloat(formData.unit7) + parseFloat(formData.service7)
                ).toFixed(2)
              )
            : null;
          formData.price8 = formData.unit8
            ? parseFloat(
                (
                  parseFloat(formData.unit8) + parseFloat(formData.service8)
                ).toFixed(2)
              )
            : null;
          formData.price9 = formData.unit9
            ? parseFloat(
                (
                  parseFloat(formData.unit9) + parseFloat(formData.service9)
                ).toFixed(2)
              )
            : null;
          formData.price10 = formData.unit10
            ? parseFloat(
                (
                  parseFloat(formData.unit10) + parseFloat(formData.service10)
                ).toFixed(2)
              )
            : null;
          formData.price11 = formData.unit11
            ? parseFloat(
                (
                  parseFloat(formData.unit11) + parseFloat(formData.service11)
                ).toFixed(2)
              )
            : null;
          formData.price12 = formData.unit12
            ? parseFloat(
                (
                  parseFloat(formData.unit12) + parseFloat(formData.service12)
                ).toFixed(2)
              )
            : null;
        // }
        addEtag(formData).then((ret) => {
          console.log("add ret", ret);
          this.$message({
            type: "success",
            message: "添加成功！",
          });
          this.dialogVisible = false;
          this.fetchData(this.listQuery);
        });
      } else if (this.editType === "edit") {
        // 修改
        // if (formData.priceType == 10) {
          formData.price1 = formData.period1
            ? parseFloat(
                (
                  parseFloat(formData.unit1) + parseFloat(formData.service1)
                ).toFixed(2)
              )
            : null;
          formData.price2 = formData.period2
            ? parseFloat(
                (
                  parseFloat(formData.unit2) + parseFloat(formData.service2)
                ).toFixed(2)
              )
            : null;
          formData.price3 = formData.period3
            ? parseFloat(
                (
                  parseFloat(formData.unit3) + parseFloat(formData.service3)
                ).toFixed(2)
              )
            : null;
          formData.price4 = formData.period4
            ? parseFloat(
                (
                  parseFloat(formData.unit4) + parseFloat(formData.service4)
                ).toFixed(2)
              )
            : null;
          formData.price5 = formData.period5
            ? parseFloat(
                (
                  parseFloat(formData.unit5) + parseFloat(formData.service5)
                ).toFixed(2)
              )
            : null;
          formData.price6 = formData.period6
            ? parseFloat(
                (
                  parseFloat(formData.unit6) + parseFloat(formData.service6)
                ).toFixed(2)
              )
            : null;
          formData.price7 = formData.period7
            ? parseFloat(
                (
                  parseFloat(formData.unit7) + parseFloat(formData.service7)
                ).toFixed(2)
              )
            : null;
          formData.price8 = formData.period8
            ? parseFloat(
                (
                  parseFloat(formData.unit8) + parseFloat(formData.service8)
                ).toFixed(2)
              )
            : null;
          formData.price9 = formData.period9
            ? parseFloat(
                (
                  parseFloat(formData.unit9) + parseFloat(formData.service9)
                ).toFixed(2)
              )
            : null;
          formData.price10 = formData.period10
            ? parseFloat(
                (
                  parseFloat(formData.unit10) + parseFloat(formData.service10)
                ).toFixed(2)
              )
            : null;
          formData.price11 = formData.period11
            ? parseFloat(
                (
                  parseFloat(formData.unit11) + parseFloat(formData.service11)
                ).toFixed(2)
              )
            : null;
          formData.price12 = formData.period12
            ? parseFloat(
                (
                  parseFloat(formData.unit12) + parseFloat(formData.service12)
                ).toFixed(2)
              )
            : null;
        // }
        putEtag(formData).then((ret) => {
          console.log("edit ret", ret);
          this.$message({
            type: "success",
            message: "修改成功！",
          });
          this.dialogVisible = false;
          this.fetchData(this.listQuery);
        });
      } else if (this.editType === "editStation") {
        // 分配场站
        assignStation(formData).then((ret) => {
          console.log("editStation ret", ret);
          this.$message({
            type: "success",
            message: "场站修改成功！",
          });
          this.dialogVisible = false;
          this.fetchData(this.listQuery);
        });
      } else if (this.editType === "editPrice") {
        // 编辑价格
        let obj = formData;
        // if (formData.priceType == 10) {
          formData.price1 = formData.period1
            ? parseFloat(
                (
                  parseFloat(formData.unit1) + parseFloat(formData.service1)
                ).toFixed(2)
              )
            : null;
          formData.price2 = formData.period2
            ? parseFloat(
                (
                  parseFloat(formData.unit2) + parseFloat(formData.service2)
                ).toFixed(2)
              )
            : null;
          formData.price3 = formData.period3
            ? parseFloat(
                (
                  parseFloat(formData.unit3) + parseFloat(formData.service3)
                ).toFixed(2)
              )
            : null;
          formData.price4 = formData.period4
            ? parseFloat(
                (
                  parseFloat(formData.unit4) + parseFloat(formData.service4)
                ).toFixed(2)
              )
            : null;
          formData.price5 = formData.period5
            ? parseFloat(
                (
                  parseFloat(formData.unit5) + parseFloat(formData.service5)
                ).toFixed(2)
              )
            : null;
          formData.price6 = formData.period6
            ? parseFloat(
                (
                  parseFloat(formData.unit6) + parseFloat(formData.service6)
                ).toFixed(2)
              )
            : null;
          formData.price7 = formData.period7
            ? parseFloat(
                (
                  parseFloat(formData.unit7) + parseFloat(formData.service7)
                ).toFixed(2)
              )
            : null;
          formData.price8 = formData.period8
            ? parseFloat(
                (
                  parseFloat(formData.unit8) + parseFloat(formData.service8)
                ).toFixed(2)
              )
            : null;
          formData.price9 = formData.period9
            ? parseFloat(
                (
                  parseFloat(formData.unit9) + parseFloat(formData.service9)
                ).toFixed(2)
              )
            : null;
          formData.price10 = formData.period10
            ? parseFloat(
                (
                  parseFloat(formData.unit10) + parseFloat(formData.service10)
                ).toFixed(2)
              )
            : null;
          formData.price11 = formData.period11
            ? parseFloat(
                (
                  parseFloat(formData.unit11) + parseFloat(formData.service11)
                ).toFixed(2)
              )
            : null;
          formData.price12 = formData.period12
            ? parseFloat(
                (
                  parseFloat(formData.unit12) + parseFloat(formData.service12)
                ).toFixed(2)
              )
            : null;
        // }
        addPrice(formData).then((ret) => {
          console.log("添加新价格 ret:", ret);
          if (ret.data && ret.data.otaId) {
            console.log(
              "价格修改 otaId:",
              ret.data.otaId,
              "数据：",
              formData.etagIds
            );
            formData.otaId = ret.data.otaId;
            setPrice(formData).then((ret) => {
              console.log("editStation ret", ret);
              this.$message({
                type: "success",
                message: "价格修改成功！",
              });
              this.priceDialogVisible = false;
              this.fetchData(this.listQuery);
            });
          } else {
            this.$message({
              type: "error",
              message: "价格模板指定失败，没有获取到：otaId",
            });
          }
        });
      }
    },
    onItemClick({ col, row }) {
      // 点击事件
      if (col.link) {
        if (col.link.name === "priceDetail") {
          // 价格牌详情
          console.log("priceDetail", row);
        }
      }
    },
    exportData(listQuery) {
      listQuery.stationId = this.$route.params.stationId;
      const keyDefs = [
        { key: "devIMEI", matchType: "like" },
        { key: "stationName", matchType: "like" },
        { key: "tag", matchType: "exact" },
        { key: "assign", matchType: "exact" },
      ];
      exportEtag(mergeQuerrys(keyDefs, listQuery)).then((ret) => {
        console.log(ret);
      });
    },
    setStation() {
      console.log("分配场站");
      this.editType = "editStation";
      this.editCols = this.editCols_SetStation;
      this.editValues = {
        etagIds: this.multipleSelection.map((v) => v.id),
      };
      this.dialogTitle = "分配场站";
      this.dialogVisible = true;
    },
    setPrice() {
      console.log("编辑价格");
      this.editType = "editPrice";
      this.editValues = {
        priceType: 1,
        templateType: 1,
        templateStyle: 4,
        etagIds: this.multipleSelection.map((v) => v.id),
      };
      this.dialogTitle = "编辑价格";
      this.priceDialogVisible = true;
    },
    selectChange(sel) {
      if (sel.type === "multi") {
        this.multipleSelection = sel.items;
      }
    },
  },
};
</script>
